<template>
  <div v-if="!showEdit">
    <Card>
      <p slot="title">
        菜单列表
      </p>
      <div  class="search-con search-con-right">
        <Input @on-change="handleClear" clearable placeholder="输入菜单名称搜索" v-model="menuName"/>
        <Button @click="getMenus(1)" class="search-btn" type="primary"><Icon type="search"/>搜索</Button>
      </div>
      <q-table 
        :columns="columns" 
        :loading="loading" 
        :tableData="tableData"
        :operate="operate"
        :totalRow="totalRow"
        :pageNo="pageNo"
        @pageChange="getMenus"
      />
    </Card>
  </div>
  <account-edit v-else 
    @editClose="editClose"
    :editUserAcctId="editUserAcctId"
    ></account-edit>
</template>
<script>
import QTable from '_c/base/q-table'
import menu from '@/api/sys/menu'
import AccountEdit from '../account/AccountEdit'
export default {
  components:{
    QTable,
    AccountEdit
  },
  data(){
    return{
      showEdit: false,
      editUserAcctId: '',
      menuName: '',
      pageNo: 1,
      totalRow: 0,
      userRolemap:{},
      loading: false,
      tableData: [],
      columns:[
        {title: '菜单名称', key: 'MENU_NAME'},
        {title: '父菜单', key: 'parent_menu_name'},
        {title: '菜单URL', key: 'MENU_URL'},
        {title: '排序值', key: 'MENU_SEQ'},
      ],
      operate: [
        {name: '编辑', type: 'success', func: 'handleEdit'},
        {name: '删除', type: 'error', func: 'handleDelete'}
      ]
    }
  },
  async created(){
    this.getMenus(1)
	},
  methods:{
    handleClear(){

    },
    handleEdit(item){
      this.editUserAcctId = item.user_acct_id
      this.showEdit = true
    },
    editClose(){
      this.showEdit = false
    },
    handleDelete(item){
      this.$Modal.confirm({
        title: '确认',
        content: '您确认要删除该信息吗？',
        onOk: async () => {
          const res = await menu.deleteMenu(item.MENU_ID)
          if (res.data.success){
            this.$Message.success('删除成功')
            this.getMenus(1)
          }
        },
        onCancel: () => {
            
        }
      });
    },
    async getMenus(pageNo){
      this.loading = true
      let data = await menu.getMenuList(pageNo, this.menuName);
      data = data.data
      this.tableData = data.data.result
      this.loading = false
      this.totalRow = data.data.totalRow
    },
  }
}
</script>
<style lang="css" >

</style>
